<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps API Example - Random Weather Map</title>

    <script type="text/javascript" src="../dist/markermanager.min.js"></script>
    <script type="text/javascript">
      var IMAGES = ["sun", "rain", "snow", "storm"];
      var ICONS = [];
      var map = null;
      var mgr = null;

      function initMap() {
        var myOptions = {
          zoom: 4,
          center: new google.maps.LatLng(48.25, 11.0),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        setupWeatherMarkers();
      }

      function getWeatherIcon() {
        var i = Math.floor(IMAGES.length * Math.random());
        if (!ICONS[i]) {
          var iconImage = new google.maps.MarkerImage(
            "images/" + IMAGES[i] + ".png",
            new google.maps.Size(32, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(0, 32)
          );

          var iconShadow = new google.maps.MarkerImage(
            "images/" + IMAGES[i] + ".png",
            new google.maps.Size(32, 59),
            new google.maps.Point(0, 0),
            new google.maps.Point(0, 32)
          );

          var iconShape = {
            coord: [1, 1, 1, 32, 32, 32, 32, 1],
            type: "poly"
          };

          ICONS[i] = {
            icon: iconImage,
            shadow: iconShadow,
            shape: iconShape
          };
        }
        return ICONS[i];
      }

      function getRandomPoint() {
        var lat = 48.25 + (Math.random() - 0.5) * 14.5;
        var lng = 11.0 + (Math.random() - 0.5) * 36.0;
        return new google.maps.LatLng(
          Math.round(lat * 10) / 10,
          Math.round(lng * 10) / 10
        );
      }

      function getWeatherMarkers(n) {
        var batch = [];
        for (var i = 0; i < n; ++i) {
          var tmpIcon = getWeatherIcon();

          batch.push(
            new google.maps.Marker({
              position: getRandomPoint(),
              shadow: tmpIcon.shadow,
              icon: tmpIcon.icon,
              shape: tmpIcon.shape,
              title: "Weather marker"
            })
          );
        }
        return batch;
      }

      function setupWeatherMarkers() {
        console.log(google);
        mgr = new google.maps.plugins.markermanager.MarkerManager(map, {});

        google.maps.event.addListener(mgr, "loaded", function() {
          mgr.addMarkers(getWeatherMarkers(20), 3);
          mgr.addMarkers(getWeatherMarkers(200), 6);
          mgr.addMarkers(getWeatherMarkers(1000), 8);

          mgr.refresh();
        });
      }
    </script>
    <script
      async
      defer
      type="text/javascript"
      src="https://maps.google.com/maps/api/js?sensor=true&callback=initMap"
    ></script>
  </head>

  <body>
    <div id="map" style="margin: 5px auto; width: 650px; height: 400px"></div>
    <div style="text-align: center; font-size: large;">
      Random Weather Map
    </div>
  </body>
</html>
